<template>
  <div class="chapter-container">
    <div class="header">
      <div class="title-wrapper">
        <div class="decoration-circle"></div>
        <h1 class="chapter-title">
          <span class="chapter-number">04</span>
          <span class="chapter-name">Vue 绑定语法</span>
        </h1>
        <div class="decoration-line"></div>
      </div>
      <PaginationComponent 
        :totalItems="100" 
        :pageSize="10" 
        @update="updateCurrentPage"
        class="pagination"
      />
    </div>

    <div class="content-box">
      <div class="section">
        <div class="section-header">
          <svg class="section-icon" viewBox="0 0 24 24">
            <path d="M3.9,12c0-1.71,1.39-3.1,3.1-3.1h4V7H7c-2.76,0-5,2.24-5,5s2.24,5,5,5h4v-1.9H7C5.29,15.1,3.9,13.71,3.9,12z M8,13h8v-2H8V13z M17,7h-4v1.9h4c1.71,0,3.1,1.39,3.1,3.1c0,1.71-1.39,3.1-3.1,3.1h-4V17h4c2.76,0,5-2.24,5-5S19.76,7,17,7z"/>
          </svg>
          <h2>v-bind 指令</h2>
        </div>
        <div class="example-group">
          <div class="example-card">
            <div class="code-block">
              <span class="code-tag">&lt;a</span> 
              <span class="code-attr">v-bind:href</span>=<span class="code-string">"url"</span>
              <span class="code-tag">&gt;</span>完整语法链接<span class="code-tag">&lt;/a&gt;</span>
            </div>
            <a v-bind:href="url" class="link demo-link">
              <span class="link-icon">🔗</span>
              GitHub 完整语法
            </a>
          </div>
          <div class="example-card">
            <div class="code-block">
              <span class="code-tag">&lt;a</span> 
              <span class="code-attr">:href</span>=<span class="code-string">"url"</span>
              <span class="code-tag">&gt;</span>缩写语法链接<span class="code-tag">&lt;/a&gt;</span>
            </div>
            <a :href="url" class="link demo-link">
              <span class="link-icon">🔗</span>
              GitHub 缩写语法
            </a>
          </div>
        </div>
      </div>

      <div class="section">
        <div class="section-header">
          <svg class="section-icon" viewBox="0 0 24 24">
            <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z"/>
            <path d="M11 15h2v2h-2zm0-8h2v6h-2z"/>
          </svg>
          <h2>Class 绑定</h2>
        </div>
        <div class="example-group">
          <div class="example-card">
            <div class="code-block">
              <span class="code-tag">&lt;div</span> 
              <span class="code-attr">:class</span>=<span class="code-string">"{active:isActive}"</span>
              <span class="code-tag">&gt;</span>对象语法<span class="code-tag">&lt;/div&gt;</span>
            </div>
            <div :class="{active:isActive}" class="demo-class-box">
              <div class="status-indicator" :class="{ 'active': isActive }"></div>
              <span>对象语法示例</span>
            </div>
          </div>
          <div class="example-card">
            <div class="code-block">
              <span class="code-tag">&lt;div</span> 
              <span class="code-attr">:class</span>=<span class="code-string">"{ active: isActive, danger: hasError }"</span>
              <span class="code-tag">&gt;</span>多属性对象语法<span class="code-tag">&lt;/div&gt;</span>
            </div>
            <div class="demo-class-box static" :class="{ active: isActive, danger: hasError }">
              <div class="status-indicator-group">
                <div class="status-indicator" :class="{ 'active': isActive }"></div>
                <div class="status-indicator" :class="{ 'danger': hasError }"></div>
              </div>
              <span>多属性对象语法</span>
            </div>
          </div>
          <div class="example-card">
            <div class="code-block">
              <span class="code-tag">&lt;div</span> 
              <span class="code-attr">:class</span>=<span class="code-string">"[activeClass, errorClass]"</span>
              <span class="code-tag">&gt;</span>数组语法<span class="code-tag">&lt;/div&gt;</span>
            </div>
            <div v-bind:class="[activeClass, errorClass]" class="demo-class-box">
              <div class="class-tags">
                <span class="class-tag">{{activeClass}}</span>
                <span class="class-tag">{{errorClass}}</span>
              </div>
              <span>数组语法示例</span>
            </div>
          </div>
          <div class="example-card">
            <div class="code-block">
              <span class="code-tag">&lt;div</span> 
              <span class="code-attr">:class</span>=<span class="code-string">"[isActive?activeClass:'', errorClass]"</span>
              <span class="code-tag">&gt;</span>三元表达式语法<span class="code-tag">&lt;/div&gt;</span>
            </div>
            <div v-bind:class="[isActive?activeClass:'', errorClass]" class="demo-class-box">
              <div class="conditional-expr">
                {{ isActive ? activeClass : 'inactive' }}
              </div>
              <span>三元表达式示例</span>
            </div>
          </div>
        </div>
      </div>

      <div class="section">
        <div class="section-header">
          <svg class="section-icon" viewBox="0 0 24 24">
            <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
          </svg>
          <h2>Style 绑定</h2>
        </div>
        <div class="example-group">
          <div class="example-card">
            <div class="code-block">
              <span class="code-tag">&lt;div</span> 
              <span class="code-attr">:style</span>=<span class="code-string">"{border: activeColor, fontSize: fontSize + 'px'}"</span>
              <span class="code-tag">&gt;</span>内联样式<span class="code-tag">&lt;/div&gt;</span>
            </div>
            <div :style="{border: activeColor, fontSize: fontSize + 'px'}" class="demo-style-box">
              <div class="style-properties">
                <div class="style-property">
                  <span class="property-name">border:</span> 
                  <span class="property-value">{{activeColor}}</span>
                </div>
                <div class="style-property">
                  <span class="property-name">fontSize:</span> 
                  <span class="property-value">{{fontSize}}px</span>
                </div>
              </div>
            </div>
          </div>
          <div class="example-card">
            <div class="code-block">
              <span class="code-tag">&lt;div</span> 
              <span class="code-attr">:style</span>=<span class="code-string">"styles"</span>
              <span class="code-tag">&gt;</span>样式对象<span class="code-tag">&lt;/div&gt;</span>
            </div>
            <div :style="styles" class="demo-style-box">
              <div class="style-properties">
                <div v-for="(value, key) in styles" :key="key" class="style-property">
                  <span class="property-name">{{key}}:</span> 
                  <span class="property-value">{{value}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import PaginationComponent from './PaginationComponent.vue';

export default {
  components: { PaginationComponent },
  methods: {
    updateCurrentPage(page) {
      console.log(`Home page current page is: ${page}`);
    }
  },
  data(){
    return{
      url:'https://github.com',
      isActive:true,
      hasError:false,
      activeClass:'active',
      errorClass:"static",
      activeColor:"1px solid #000",
      fontSize: 22,
      styles:{
        border:'1px solid #000',
        fontSize:'22px',
        padding: '12px',
        borderRadius: '8px',
        backgroundColor: '#f8f9fa',
        boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
      }
    };
  }
};
</script>

<style scoped>
.chapter-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 30px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  color: #2d3748;
  background-color: #f7fafc;
  min-height: 100vh;
}

.header {
  display: flex;
  flex-direction: column;
  margin-bottom: 40px;
}

.title-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  position: relative;
}

.decoration-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  margin-right: 16px;
  flex-shrink: 0;
}

.decoration-line {
  height: 2px;
  flex-grow: 1;
  background: linear-gradient(90deg, #e2e8f0, #667eea);
  margin-left: 16px;
}

.chapter-title {
  font-size: 32px;
  font-weight: 700;
  color: #1a202c;
  display: flex;
  align-items: baseline;
  margin: 0;
}

.chapter-number {
  color: #667eea;
  margin-right: 12px;
  font-size: 40px;
}

.chapter-name {
  position: relative;
  top: 2px;
}

.pagination {
  align-self: flex-end;
}

.content-box {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  padding: 30px;
  border: 1px solid #e2e8f0;
}

.section {
  margin-bottom: 40px;
}

.section:last-child {
  margin-bottom: 0;
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid #edf2f7;
}

.section-header h2 {
  font-size: 22px;
  font-weight: 600;
  color: #2d3748;
  margin: 0 0 0 12px;
}

.section-icon {
  width: 24px;
  height: 24px;
  fill: #667eea;
}

.example-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
}

.example-card {
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  border: 1px solid #e2e8f0;
}

.example-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.code-block {
  background-color: #2d3748;
  color: #e2e8f0;
  padding: 16px;
  font-family: 'Fira Code', 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.5;
  border-radius: 8px 8px 0 0;
}

.code-tag {
  color: #feb2b2;
}

.code-attr {
  color: #90cdf4;
}

.code-string {
  color: #9ae6b4;
}

.demo-link {
  display: flex;
  align-items: center;
  padding: 16px;
  color: #4299e1;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}

.demo-link:hover {
  color: #3182ce;
  background-color: #ebf8ff;
}

.link-icon {
  margin-right: 8px;
  font-size: 18px;
}

.demo-class-box {
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100px;
  justify-content: center;
  border-top: none;
  border-radius: 0 0 8px 8px;
}

.status-indicator {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #e2e8f0;
  margin-bottom: 12px;
  position: relative;
}

.status-indicator.active {
  background-color: #48bb78;
  box-shadow: 0 0 0 3px rgba(72, 187, 120, 0.2);
}

.status-indicator.danger {
  background-color: #f56565;
  box-shadow: 0 0 0 3px rgba(245, 101, 101, 0.2);
}

.status-indicator-group {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.class-tags {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.class-tag {
  background-color: #edf2f7;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-family: monospace;
}

.conditional-expr {
  background-color: #fefcbf;
  padding: 4px 8px;
  border-radius: 4px;
  margin-bottom: 12px;
  font-family: monospace;
  font-size: 14px;
}

.demo-style-box {
  padding: 16px;
  min-height: 120px;
  border-top: none;
  border-radius: 0 0 8px 8px;
}

.style-properties {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.style-property {
  display: flex;
  font-family: 'Fira Code', monospace;
  font-size: 14px;
}

.property-name {
  color: #4a5568;
  margin-right: 8px;
}

.property-value {
  color: #2d3748;
  font-weight: 500;
}

.active {
  border: 1px solid #c6f6d5;
  background-color: #f0fff4;
}

.static {
  font-size: 16px;
  color: #4a5568;
}

.danger {
  background-color: #fff5f5;
  border: 1px solid #fed7d7;
}

.toggle-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background-color: #f7fafc;
  border-top: 1px solid #e2e8f0;
}

.toggle-label {
  font-size: 14px;
  font-weight: 500;
  color: #4a5568;
}

@media (max-width: 768px) {
  .chapter-container {
    padding: 24px 16px;
  }
  
  .example-group {
    grid-template-columns: 1fr;
  }
  
  .chapter-title {
    font-size: 24px;
  }
  
  .chapter-number {
    font-size: 32px;
  }
}
</style>